<template>
	
	<div>
		
		 <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
		    <!-- <el-table-column
		      label="索引"
		      prop="date">
		    </el-table-column> -->
			
			<el-table-column label="索引号" type="index" width="100" align="left"> </el-table-column>
			
		    <el-table-column label="车位号" prop="id"> </el-table-column>
			<el-table-column label="车位区域" prop="address"> </el-table-column>
			<el-table-column label="车位状态" prop="state"> </el-table-column>
			<el-table-column label="小时价格" prop="price"> </el-table-column>
			
		    <el-table-column align="right">
			 
			  <template slot="header" slot-scope="scope">
			    <el-dropdown>
			      <el-button type="primary">
			        停车区域<i class="el-icon-arrow-down el-icon--right"></i>
			      </el-button>
			      <el-dropdown-menu slot="dropdown">
			        <el-dropdown-item index="1"  @click.native="clickIndex(1)">A区</el-dropdown-item>
			        <el-dropdown-item index="2"  @click.native="clickIndex(2)">B区</el-dropdown-item>
			        <el-dropdown-item index="3"  @click.native="clickIndex(3)">C区</el-dropdown-item>
			        <el-dropdown-item index="4"  @click.native="clickIndex(4)">D区</el-dropdown-item>
			      </el-dropdown-menu>
			    </el-dropdown>
			  </template>
			  
		      <template slot-scope="scope">
				  <el-button :disabled ="scope.row.state == '已使用'" @click="Order(scope.row)" plain>立即预约</el-button>
		      </template>
		    </el-table-column>
		  </el-table>
		
	</div>
	
</template>
 
<script>
	
	 export default {
	    data() {
	      return {
	        tableData: [
				// { number:'1',
				// 	location:'A区',
				// 	state:'未使用',
				// 	price:'10', }
			],
	        search: ''
	      }
	    },
	    methods: {
			clickIndex(args){
				alert(args)
				var str="number="+args
				this.axios({
					method:"POST",
					url:"/Park/findByAddress",
					data:str
				}).then((res) =>{
					  console.log(res);
					  this.tableData=res.data;
					  console.log(this.tableData);
				  })
			  
			}, 
			aaa(){
				 //自动加载
				this.$axios.post("/Park/findALL").then((res)=>{
					this.tableData=res.data;
					console.log(this.tableData) 
					}) 
			},
			Order(row){
				console.log(row)
				/* /Park_ChangeMoney */
				this.$router.push({
					
					path:"/Park_ChangeMoney",
					query:{id:row}
					
				})
				
			}
		  // handleEdit(index, row) {
		  //   console.log(index, row);
		  // },
		  // handleDelete(index, row) {
		  //   console.log(index, row);
		  // },
		  
		  
		  
	    },
		mounted: function(){
			this.aaa();//需要触发的函数
		},
		
	  }
	
</script>


<!-- tableData: [{
	          date: '2016-05-02',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1518 弄'
	        }, {
	          date: '2016-05-04',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1517 弄'
	        }, {
	          date: '2016-05-01',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1519 弄'
	        }, {
	          date: '2016-05-03',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1516 弄'
	        }], -->